<template>
    <div class="side_bar_body">
        <div class="bar_head">书籍类别</div>
        <div v-for="(item, index) in bookTypes" :key="index" class="book_type_item" @click="selectBookType(index)">
            {{item}}
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            bookTypes: [
                '线装古籍/民国旧书', '期刊/报纸', '收藏鉴赏/国学古籍', '小说/文学', '历史/地理/艺术',
                '政治/法律/军事', '哲学/心理/宗教', '经济/社科/综合', '生活/体育', '工程技术/互联网',
                '自然科学/医药卫生', '教材/教辅/考试'
            ],
        }
    },
    methods: {
        selectBookType(index) {
            console.log(index)
        }
    }
}
</script>

<style scoped>
.side_bar_body{
    position: fixed;
    width: 180px;
    height: 604px;
    border: 1px solid rgb(240, 119, 20);
    top: 170px;
    left: 230px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
}
.bar_head{
    width: 100%;
    height: 40px;
    border-radius: 8px 8px 0 0;
    background-color: rgb(240, 119, 20);
    font-size: 18px;
    text-align: center;
    color: white;
    line-height: 40px;
}
.book_type_item{
    width: 100%;
    height: 47px;
    padding-left: 18px;
    font-size: 15px;
    line-height: 47px;
    font-weight:bold;
    border-top: 1px solid rgb(240, 119, 20);
    cursor: pointer;
}
</style>

